<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>test</title>
        <script type="text/javascript" include="leaflet.miniMap,leaflet.sidebyside" src="../../dist/leaflet/include-leaflet.js"></script>
		<script type="text/javascript" src="../js/include-web.js"></script>
        <script type="text/javascript" src="../JS/jquery-3.5.0.js"></script>
        <link rel="stylesheet" href="../leaflet/leaflet.css"/>
        <!-- <script src="../leaflet/leaflet.js"></script> -->
        <style type="text/css">
            .legendItemHeader,
            .legendItemValue {
                width: 120px;
                height: 18px;
                font-size: 14px;
            }
            .legend {
                line-height: 18px;
                color: #555;
            }
            .legend i {
                width: 18px;
                height: 18px;
                float: left;
                margin-right: 8px;
                opacity: 0.7;
            }
            .info {
                padding: 6px 8px;
                font: 14px/16px Arial, Helvetica, sans-serif;
                background: white;
                background: rgba(255,255,255,0.8);
                box-shadow: 0 0 15px rgba(0,0,0,0.2);
                border-radius: 5px;
            }
            .info h4 {
                margin: 0 0 5px;
                color: #777;
            }


            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map {
                height: 100%;
            }
        </style>

    </head>
    <body style="margin: 0;overflow: hidden;background: #fff;width: 100%;height: 100%;position: absolute;top: 0;">
        

        <div id="map" style="margin:0 auto;width: 100%;height: 80%">
            
        </div>
        <script type="text/javascript">
            var map,
            SHP_layer,//定义矢量图层

            China_url="http://192.168.199.167:8090/iserver/services/map-china400/rest/maps/China",
            ChinaDark_url="http://192.168.199.167:8090/iserver/services/map-china400/rest/maps/ChinaDark",
            
            
            SHP_url="http://192.168.199.167:8090/iserver/services/map-maoer_SHP/rest/maps/"
            maoer_data_url="http://192.168.199.167:8090/iserver/services/data-maoer_shp/rest/data";
            var maoer_Host_url="http://192.168.199.167:8090/iserver/services/map-subset_test/rest/maps/";
            var urlmaoer_name=SHP_url+"maoer_shp@maoer_SHP_1",
            urlmaoer_shp =SHP_url+"maoer_shp@maoer_SHP";

            var map = L.map('map', {
                center: [45.37, 127.6],
                maxZoom: 18,
                zoom: 11,
                zoomControl: false
            });
            
            var China = L.supermap.tiledMapLayer(China_url, {noWrap: true});
            var ChinaDark = L.supermap.tiledMapLayer(ChinaDark_url, {
                transparent:true,
                opacity:0,
                noWrap: true});
            var maoer_theme_map = L.supermap.tiledMapLayer(maoer_Host_url+"dat1@subset_test",{
                transparent:true,
                opacity:0.8
            });
            var maoer_theme_name=L.supermap.tiledMapLayer(urlmaoer_name,{
                transparent:true,
                opacity:1,
                zIndex:1
            });
            var maoer_theme_shp=L.supermap.tiledMapLayer(urlmaoer_shp,{
                transparent:true,
                opacity:0.3
            });

            //初始图层
            China.addTo(map);
            ChinaDark.addTo(map);
            maoer_theme_map.addTo(map);
            maoer_theme_name.setZIndex(10);
            loadComponents()

/***************************************************************封装函数*********************************************************************************************/
            //添加矢量图层
            
            var resultLayer;
            function add_SHP(SHP_url_suf){
                if(map.hasLayer(SHP_layer)){
                    map.removeLayer(SHP_layer);
                }
                SHP_layer=L.supermap.tiledMapLayer(SHP_url+SHP_url_suf,{
                    transparent:true,
                    opacity:0.8
                });
                if(map.hasLayer(resultLayer)){
                    map.removeLayer(resultLayer);
                }
                query_init();
                SHP_layer.addTo(map)
                maoer_theme_name.setZIndex(10);
            }
            //移除矢量图层
            function remove_SHP(){
                if(map.hasLayer(SHP_layer)){
                    map.removeLayer(SHP_layer);
                }
                if(map.hasLayer(resultLayer)){
                    map.removeLayer(resultLayer);
                }
            }

            //点击地图与地图进行交互
            function query_init() {
                var idsParam = new SuperMap.GetFeaturesByIDsParameters({
                    IDs: [1,2,3,4,5,6,7,8,9,10],//为超图为每个控件对象设置的默认SmID值
                    datasetNames:["maoer_shp:maoer_4326"]//数据需要为4326投影方式，读取的json对象为经纬度坐标
                });
                L.supermap
                    .featureService(maoer_data_url)
                    .getFeaturesByIDs(idsParam, function (serviceResult) {
                        // var str = JSON.stringify(serviceResult.result.features)
                        if(map.hasLayer(resultLayer)){
                            map.removeLayer(resultLayer);
                        }
                        resultLayer = L.geoJSON(serviceResult.result.features, {
                            style:function(feature){
                                // console.log(feature.properties.color);
                                return {color:"transparent"};
                            },
                            onEachFeature:onEachFeature
                        });
                        resultLayer.addTo(map);
                    });
            }
            //绑定鼠标事件
            function onEachFeature(feature, layer) {
                layer.on({
                    mouseover: highlightFeature,
                    mouseout: resetHighlight,
                    click: popToFeature,
                    add: init_layer
                });
            }
            //图层加载-----------加载所有数据并弹窗，
            //此处由于popToFeature的bug，第一次点击事件中无法弹窗，因此在图层加载的时候先进行一次预弹出，但是不显示，弥补后面的点击bug
            function init_layer(e){
                var layer = e.target;
                console.log(layer.feature.properties)
                layer.bindPopup("ID: " + layer.feature.properties.林区名 +"<br>" + "面积" + "：" + layer.feature.properties.AREA);
            }
            //鼠标事件--------鼠标进入高亮
            function highlightFeature(e) {
                var layer = e.target;

                layer.setStyle({
                    weight: 4,
                    color: '#888',
                    dashArray: '',
                    fillOpacity: 0.7
                });

                if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                    layer.bringToFront();
                }
            }
            //鼠标事件--------鼠标移出恢复
            function resetHighlight(e) {
                resultLayer.resetStyle(e.target);
            }
            //鼠标事件--------鼠标点击弹窗
            function popToFeature(e) {
                var layer = e.target;
                // console.log(layer.feature.properties)
                layer.bindPopup("ID: " + layer.feature.properties.林区名 +"<br>" + "面积" + "：" + layer.feature.properties.AREA);
            }
            //专题图样式
            function style(feature) {
                return {
                    fillColor: getColor(feature.properties.area),
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    dashArray: '3',
                    fillOpacity: 0.7
                };
            }

            
            //专题图切换
            function changeThem(url){//传递的参数为"数据@工作空间"格式
                if(map.hasLayer(resultLayer)){
                    map.removeLayer(resultLayer);
                }
                if(map.hasLayer(SHP_layer)){
                    map.removeLayer(SHP_layer);
                }
                if(map.hasLayer(maoer_theme_map)){
                    map.removeLayer(maoer_theme_map);
                }
                maoer_theme_map = L.supermap.tiledMapLayer(maoer_Host_url+url,{
                    transparent:true,
                    opacity:0.8
                });
                maoer_theme_map.addTo(map);
                maoer_theme_name.setZIndex(10);//设置林场名称图层zindex为10
            }
           
           
            /********************************************地图切换****************************************************/
		    // 切换为China，将China的opacity设为1，ChinaDark的opacity设为0
            function changetoChina_map(){
                China.setOpacity(1);
                ChinaDark.setOpacity(0);
            }
            // 切换为ChinaDark，与上一种情况相反
            function changetoChinaDark_map(){
                China.setOpacity(0);
                ChinaDark.setOpacity(1);
            }
		
            /*********************************************组件加载********************************************************/
            function loadComponents() {
                //图层切换
                var baseMaps = {
                    // "China":China,
                    // "ChinaDark":ChinaDark
                };
                var overlayMaps = {
                    // "China":China,
                    // "ChinaDark":ChinaDark,
                    "林场名": maoer_theme_name
                };
                L.control.layers(baseMaps, overlayMaps).addTo(map);
                //比例尺
                L.control.scale({position:'topright'}).addTo(map);
                //鹰眼图
                var osm2 = L.supermap.tiledMapLayer(China_url, {minZoom: 5, maxZoom: 13,noWrap: true});
                L.control.minimap(osm2, {mapOptions:{ logoControl: false},toggleDisplay: true}).addTo(map);
                //缩放控件
                L.control.zoom({position:'topright'}).addTo(map);
            }
            


        </script>


        <script type="text/javascript">

            //专题图和图例配色
            function getColor(d) {
                return d > 3000 ? '#800026' :
                    d > 2800  ? '#BD0026' :
                        d > 2600  ? '#E31A1C' :
                            d > 2400  ? '#FC4E2A' :
                                d > 2200   ? '#FD8D3C' :
                                    d > 2000   ? '#FEB24C' :
                                        d > 1800   ? '#FED976' :
                                            '#FFEDA0';
            }


        </script>
        <div id="map" style="margin:0 auto;width: 100%;height: 20%">
            <div id="map" style="margin:0 auto;width: 100%;height: 20%">
                <!-- 底图切换 -->
                <label onclick="changetoChina_map()">切换为China</label><br/>
                <label onclick="changetoChinaDark_map()">切换为ChinaDark</label><br/>
                
                <!-- 专题图切换 -->
                <label onclick="changeThem('dat1@subset_test')">专题图1</label><br/>
                <label onclick="changeThem('dat2@subset_test2')">专题图2</label><br/>
                <label onclick="changeThem('dat3@subset_test')">专题图3</label><br/>
                <label onclick="changeThem('dat4@subset_test')">专题图4</label><br/>
            </div>
            <div id="map" style="margin:0 auto;width: 50%;height: 20%">
                <label onclick="add_SHP('maoer_shp@maoer_SHP')">显示矢量专题图</label><br/>
                <label onclick="remove_SHP()">取消矢量专题图</label><br/>
            </div>
        </div>
        
    </body>
</html>